<!-- 收上网费：旅网/自网 -->
<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :visible="true"
    :close-on-click-modal="false"
    @close="closeMd"
    :title="'收上网费'"
    width="80%"
  >
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="抵扣收款" name="lw-tab">
        <!-- 经半人： 员工列表； 车牌号；  -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="operUname" label="经办人" width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.operUname"
                clearable
                filterable
                placeholder="经办人"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.baseUserId.uname"
                  :label="item.baseUserId.realName"
                  :value="item.baseUserId.uname"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="cusUname" label="往来客户" width="120">
            <template slot-scope="scope">
              <el-select
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="loading"
                style="width: 100%"
                v-model="scope.row.cusUname"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="(item, index) in cusOptions"
                  :key="index"
                  :label="item.unitName"
                  :value="item.serviceMan"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="plateNum" label="车牌号" width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.plateNum"
                clearable
                filterable
                placeholder="车牌号"
              >
                <el-option
                  v-for="(it, index) in carNumList"
                  :key="index + 'info'"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="jfMoney" label="收入金额" width="120">
            <template slot-scope="scope">
              <el-input
                placeholder="收入金额"
                v-model="scope.row.jfMoney"
                type="number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="dfMoney" label="支出金额" width="120">
            <template slot-scope="scope">
              <el-input
                placeholder="支出金额"
                type="number"
                v-model="scope.row.dfMoney"
              />
            </template>
          </el-table-column>
          <el-table-column prop="reimTypeId" label="记账类型" width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.reimTypeId"
                clearable
                filterable
                placeholder="记账类型"
              >
                <el-option
                  v-for="item in countTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="imgUrls" label="图片" width="180">
            <template slot-scope="scope">
              <UploadImg 
                :imgName="`${scope.row}`"
                :src="fileBaseUrl+scope.row.imgUrls"
                @getImgUrl="(e) => setImgUrl(e, scope.$index)"
                :url="'/company/upload'"
                :ps="{ userName: uname }"
              />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="摘要" width="180">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                maxlength="500"
                placeholder="款项说明，字数限定500字"
                v-model="scope.row.remark"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="180"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="handleAddTable">添加</el-button>
              <el-button @click="handleCancle(scope)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 15px">
          <el-row>
            <el-col :span="2">
              <span style="">收款备注</span>
            </el-col>
            <el-col :span="7">
              <el-input type="textarea" v-model="lastPd.remarkGat" />
            </el-col>
          </el-row>
        </div>

        <div style="text-align: center; margin: 20px">
          <el-button type="primary" @click="handleSumbit">保存</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="现金收款" name="zw-tab">
        <AddBank :row="myData.order" @closeModal="closeModal" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import DataGridBase from "@/views/mixins/DataGridBase";
import elDragDialog from "@/directive/el-drag-dialog";
import UploadImg from "@/components/UploadImg";
import AddBank from "./add";

// 车牌号
import { getAllPlateNum } from "@/api/services/logistics.service";
// 员工
import { getStaffList } from "@/api/services/personMan.service";
import {
  //报账类型

  getReimTypeDict,
  // 客户
  getStaffCombo,
  getCompanyCusList,
  //提交上网费
  gathOnlineDeduct,
} from "@/api/services/common.service";
export default {
  name: "CollectInternetFree",
  mixins: [DataGridBase],
  directives: { elDragDialog },
  components: { UploadImg, AddBank },
  props: { myData: Object },
  computed: {
    ...mapGetters(["uname"]),
  },
  data() {
    // 订单对象
    let order = this.myData.order;

    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,

      loading: false,
      tableData: [
        {
          operUname: "", // 经办人
          cusUname: "", // 往来客户
          plateNum: "", // 车牌号
          jfMoney: "", // 收入金额
          dfMoney: "", // 支出金额
          remark: "", // 摘要
          imgUrls: "", // 图片
          reimTypeId: "", // 报账类型
        },
      ],
      // 经办人列表-员工：
      userList: [],
      // 车牌号列表：
      carNumList: [],
      // 报账类型列表；
      countTypeList: [],
      // 往来客户列表
      customList: [],
      cusOptions: [],
      // 当前tab选中key
      activeName: "lw-tab",
      lastPd: {
        remarkGath: "",
        orderIds: "",
        staffReimInfo: [],
      },
      fm: {
        fname: "lwFm",
        sb: { load: false, text: "确定添加" },
        ps: {
          operUname: "", // 经办人
          cusUname: "", // 往来客户
          plateNum: "", // 车牌号
          jfMoney: "", // 收入金额
          dfMoney: "", // 支出金额
          remark: "", // 摘要
          imgUrls: "", // 图片
          reimTypeId: "", // 报账类型
        },
      },
    };
  },
  created() {
    // that.getServiceManList();
    this.getCarNumList();
    this.getCountTypeList();
    this.getCustomList();
  },
  methods: {
    closeMd() {
      // 关闭弹框
      this.$emit("myClick", false);
    },
    // 图片上
    setImgUrl(e, index) {
      this.tableData[index].imgUrls = e.url;
    },
    // 取消表格
    handleCancle(scope) {
      if (this.tableData.length === 1) {
        return this.U.qerror("至少有一条数据");
      }

      this.tableData.splice(scope.$index, 1);
    },
    remoteMethod(query) {
      if (!query) {
        return (this.cusOptions = []);
      }
      this.loading = true;
      getCompanyCusList({ find: query })
        .then((res) => {
          this.loading = false;
          this.cusOptions = res.data;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 点击表格添加
    handleAddTable() {
      if (this.tableData.length >= 20) {
        return this.U.qerror("最多添加20条数据");
      }
      this.tableData.push({
        operUname: "", // 经办人
        cusUname: "", // 往来客户
        plateNum: "", // 车牌号
        jfMoney: "", // 收入金额
        dfMoney: "", // 支出金额
        remark: "", // 摘要
        imgUrls: "", // 图片
        reimTypeId: "", // 报账类型
      });
    },
    // 点击tab事件
    handleTabClick(tab, event) {},
    // 获取车牌号
    getCarNumList() {
      // let loading = this.U.qloading("数据请求中...");
      getAllPlateNum({ status: 0 })
        .then((res) => {
          // this.U.qclose(loading);
          if (res.code !== 1) {
            // return this.U.qerror(res.msg);
          }
          this.carNumList = Object.keys(res.plateNums).map((item) => ({
            label: item,
            value: item,
          }));
          this.U.qclose(loading);
        })
        .catch((err) => {
          // this.U.qclose(loading);
          this.U.qerror(err);
        });
    },
    // 获取员工
    getUserList() {
      let loading = that.U.qloading("数据请求中...");
      getAllPlateNum({})
        .then((res) => {
          if (code !== 1) {
            return this.U.qerror(msg);
          }
          this.U.qclose(loading);
        })
        .catch((err) => {
          this.U.qerror(msg);
        });
    },
    // 报账类型列表；
    getCountTypeList() {
      // 报账类型
      getReimTypeDict({addWay: 0, type: 1}).then((res) => {
        this.countTypeList = res.data;
      });
    },
    // 往来客户列表
    getCustomList() {
      // 员工下拉(经办人)
      getStaffCombo({ staffState: "NORMAL,TRY" }).then((res) => {
        this.userList = res.data || [];
      });
      // let loading = that.U.qloading("数据请求中...");
      // getAllPlateNum({})
      //   .then((res) => {
      //     if (code !== 1) {
      //       return this.U.qerror(msg);
      //     }
      //     this.U.qclose(loading);
      //   })
      //   .catch((err) => {
      //     this.U.qerror(msg);
      //   });
    },
    /**
     * 保存
     */
    handleSumbit() {
      const ids = this.myData.order.map((item) => item.id).join(",");
      const pd = {
        remarkGat: this.lastPd.remarkGat,
        orderIds: ids,
        staffReimInfo: this.tableData,
      };
      gathOnlineDeduct(pd)
        .then((res) => {
          if (res.code != 1) {
            this.U.qerror(res.msg);
            return;
          }
          this.closeMd();
          this.$emit("reloadDg");
        })
        .catch((err) => {
          that.$emit("reloadDg");
        });
    },
    // 现金记账
    closeModal() {
      this.closeMd();
      this.$emit("reloadDg");
    },
  },
};
</script>
